import React,{useState} from 'react'
import { useDispatch } from 'react-redux';
import { todoAdd } from '../store/actions';

export default function TodoHeader() {
  const [state,setState] =useState("");
  const dispatch =useDispatch();

  const handleChange=(e)=>{
    setState(e.target.value)
  }
  const handleKeyUp=(e)=>{
    if(e.target.value && e.key==="Enter"){
      dispatch(todoAdd(state));
      setState("");
    }
  }
  return (
    <header className="header">
    <h1>todos</h1>
    <input className="new-todo" placeholder="What needs to be done?" autoFocus value={state} onChange={handleChange} onKeyUp={handleKeyUp}/>
  </header>
  )
}
